<!--
 * @Author: 刘奇泽
 * @Date: 2022-01-07 17:48:20
 * @LastEditTime: 2022-03-31 17:39:35
 * @LastEditors: 刘奇泽
 * @FilePath: /andeng-largescreen/src/components/scroll/index.vue
 * @Description: 
-->

<template>
  <div class="a-scroll w-full h-full" :style="scrollStyle">
    <slot></slot>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onBeforeUnmount, watch, nextTick, computed } from "vue";
import { stepAnimationTime, stepAnimationWaitTime } from "@/utils/config";
const props = defineProps<{
  len: number;
  isStart: boolean;
}>();
const timer = ref(0);
let offsetHeight = 0;
let step = 0;
const scrollStyle = reactive({ transform: "translateY(0px)", transition: "transform 0.3s ease-out" });
const setTime = (domList: Element[]) => {
  clearInterval(timer.value);
  // @ts-ignore
  timer.value = setInterval(() => {
    try {
      offsetHeight = getScrollListHeight(step, domList);
      if (step === props.len - 1) {
        const res = {
          transform: `translateY(${-offsetHeight}px)`,
          transition: `transform ${stepAnimationTime}ms ease-in-out`,
        };
        scrollStyle.transform = res.transform;
        scrollStyle.transition = res.transition;
        step++;
        setTimeout(() => {
          const res = {
            transform: `translateY(${0}px)`,
            transition: `none`,
          };
          scrollStyle.transform = res.transform;
          scrollStyle.transition = res.transition;
        }, stepAnimationTime);
      } else if (step === props.len) {
        step = 0;
        offsetHeight = getScrollListHeight(step, domList);
        const res = {
          transform: `translateY(${-offsetHeight}px)`,
          transition: `transform ${stepAnimationTime}ms ease-in-out`,
        };
        scrollStyle.transform = res.transform;
        scrollStyle.transition = res.transition;
        step++;
      } else {
        const res = {
          transform: `translateY(${-offsetHeight}px)`,
          transition: `transform ${stepAnimationTime}ms ease-in-out`,
        };
        scrollStyle.transform = res.transform;
        scrollStyle.transition = res.transition;
        step++;
      }
    } catch (error) {
      console.log(error + "222");
    }
  }, stepAnimationTime + stepAnimationWaitTime);
};
const getScrollListHeight = (step: number, domList: Element[]) => {
  let height = 0;
  domList.forEach((item, index) => {
    const marginB = parseInt(document.defaultView?.getComputedStyle(item, null)["marginBottom"] as string) || 0;
    if (index <= step) {
      height += Math.round(item.clientHeight + marginB);
    }
  });
  return height;
};
const getScrollList = () => {
  const scroll = document.querySelector(".a-scroll") as HTMLElement;
  const newList = [];
  const { innerHTML, children } = scroll;
  scroll.innerHTML = innerHTML + innerHTML;
  for (let i = 0; i < children.length; i++) {
    newList.push(children[i]);
    newList[i].setAttribute("data-index", i + "");
  }
  setTime(newList);
};

watch(
  [() => props.isStart, () => props.len],
  ([open, len]) => {
    console.log(open, len, "watch");
    if (open && len > 4) {
      nextTick(() => {
        getScrollList();
      });
    } else {
      clearInterval(timer.value);
    }
  },
  {
    immediate: true,
  }
);
window.addEventListener("resize", getScrollList);
onBeforeUnmount(() => {
  console.log("1");
  clearInterval(timer.value);
  window.removeEventListener("resize", getScrollList);
});
</script>

<script lang="ts">
export default { name: "AScroll" };
</script>
